<template>
	<view class="page">
		<view class="banner">
			<unicloud-db ref="bannerdb" v-slot:default="{data, loading, error, options}" collection="opendb-banner"
				field="_id,bannerfile,open_url,title">
				<!-- 当无banner数据时显示占位图 -->
				<image v-if="!(loading||data.length)" class="banner-image" src="/static/uni-center/headers.png"
					mode="aspectFill" :draggable="false" />
				<swiper v-else class="swiper-box" @change="change" :current="current" indicator-dots>
					<swiper-item v-for="(item, index) in data" :key="item._id">
						<view class="swiper-item">
							<image class="banner-image" :src="item.bannerfile.url"
								style="width: 100%; aspect-ratio: 16/9;" :draggable="false" />
						</view>
					</swiper-item>
				</swiper>
			</unicloud-db>
		</view>
		<view class="notice" style="padding: 10px;">
			<uni-notice-bar showClose showIcon scrollable="true" :text="notice.type +'：'+ notice.data" :speed="50" />
		</view>
		<view class="apps">
			<view class="item" @click="to_news">
				<image src="../../../static/index/xinwen.png" style="width: 50px;height: 50px;"></image>
				<text>新闻中心</text>
			</view>
			<view class="item" @click="to_luntan">
				<image src="../../../static/index/xiaoyuanluntan.png" style="width: 50px;height: 50px;"></image>
				<text>校园论坛</text>
			</view>
			<view class="item" @click="to_shiwu">
				<image src="../../../static/index/shiwuzhaoling.png" style="width: 50px;height: 50px;"></image>
				<text>失误诏领</text>
			</view>
			<view class="item" @click="to_activity">
				<!-- <uni-icons type="bars" size="60"></uni-icons> -->
				<image src="../../../static/index/huodongzixun.png" style="width: 50px;height: 50px;"></image>
				<text>活动资讯</text>
			</view>
		</view>
	</view>
</template>

<script>
	const db = uniCloud.database()
	let notice_db = db.collection('opendb-notice');
	export default {
		components: {},
		data() {
			return {
				current: 0,
				notice: {
					data: "内容",
					type: "类型"
				}
			}
		},
		onLoad() {
			this.load_notice()
		},
		methods: {
			async load_notice() {
				const res = await notice_db.get({
					getOne: true
				})
				this.notice = res.result.data
			},
			to_news() {
				uni.navigateTo({
					url: "/pages/user/news/news"
				})
			},
			to_luntan() {
				uni.navigateTo({
					url: "/pages/user/luntan/luntan"
				})
			},
			to_shiwu() {
				uni.navigateTo({
					url: "/pages/user/lost/lost"
				})
			},
			to_activity() {
				uni.navigateTo({
					url: "/pages/user/activity_news/activity_news"
				})
			},
			change(e) {
				this.current = e.detail.current
			},
			clickItem(e) {
				this.swiperDotIndex = e
			}
		}
	}
</script>


<style lang="scss">
	/* 页面基础样式 */
	.page {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20px;
		background-color: #00A8F3;
		height: 100vh;
		/* 轻灰色背景 */
	}

	/* 轮播图区域样式 */
	.banner {
		width: 100%;
		margin-bottom: 5px;
	}

	.banner-image {
		width: 100%;
		border-radius: 10px;
		/* 圆角边框 */
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		/* 轻微阴影效果 */
	}

	/* 通知条样式 */
	.notice {
		width: 100%;
		// padding: 0;
		// margin-bottom: 5px;
	}

	/* 应用区域样式 */
	.apps {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		width: 100%;
	}

	.apps>* {
		width: calc(50% - 20px);
		/* 20px是为了考虑margin或padding的空间 */
		margin: 5px;
		/* 设置间距 */
	}

	.item {
		display: flex;
		flex-direction: row;
		align-items: center;
		background-color: #83B3FD;
		padding: 10px;
		margin: 10px;
		border-radius: 10px;
		width: 40%;
	}

	text {
		font-size: 14px;
		color: #333;
		/* 深灰色文字 */
	}

	.swiper-box {
		height: 200px;
	}

	.swiper-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 200px;
		color: #fff;
	}


	.image {
		width: 750rpx;
	}
</style>